<script setup lang="ts">
import RichTextEditor from '@/components/common/RichTextEditor.vue'

import { reactive } from 'vue'

const formData = reactive<{
  category?: string
  validTime?: string
  question?: string
  answer?: string
}>({
  category: '全部',
  validTime: '1',
  question: '',
  answer: '',
})

const categoryList = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '其他',
    label: '其他',
  },
]
</script>

<template>
  <div>
    <!-- 第1行 -->
    <el-row class="label-wrap">
      <el-col :span="12"><span class="label">分类</span></el-col>
      <el-col :span="12"><span class="label">有效时间</span></el-col>
    </el-row>
    <el-row class="form-wrap">
      <el-col :span="12">
        <el-select v-model="formData.category" placeholder="请选择" style="width: 240px">
          <el-option
            v-for="item in categoryList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-radio-group v-model="formData.validTime">
          <el-radio value="1">永久有效</el-radio>
          <el-radio value="2">指定日期</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>

    <!-- 第2行 -->
    <el-row class="label-wrap">
      <el-col :span="24"><span class="label">问题</span></el-col>
    </el-row>
    <el-row class="form-wrap" :gutter="10">
      <el-col :span="16">
        <el-input v-model="formData.question" />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" plain>查找相似问题</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" plain>增加一种问法</el-button>
      </el-col>
    </el-row>

    <!-- 第3行 -->
    <el-row class="label-wrap">
      <el-col :span="24"><span class="label">答案</span></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <rich-text-editor height="200px" />
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.label-wrap {
  margin-bottom: 5px;
}

.form-wrap {
  margin-bottom: 15px;
}
</style>
